<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>Document</title>
</head>
<style>
    #main div {
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div id="main">
        <div v-changecolor='color' @click='click'></div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#main',
        data: {
            color: 'pink'
        },
        directives: {
            changecolor: {
                inserted(el, bind) {
                    console.log(el);
                    let bindvalue = bind.value;
                    el.style.backgroundColor = bindvalue;
                },
                update(el,bind){
                    console.log("更新了");
                    console.log(bind.value);
                    el.style.backgroundColor = bind.value
                }
            }
        },
        methods: {
            click:function(){
                // this.color = 'lightblue'
                if(this.color == 'pink'){
                    this.color = 'lightblue'
                }else{
                    this.color = 'pink'
                }
            }
        }
    })
</script>

</html>